<template>
    <z-paging
        :paging-style="{ background: '#f6f6f6' }"
        ref="paging"
        :refresher-out-rate="0.8"
        :show-empty-view-reload-when-error="false"
        :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
        empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
        empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
        empty-view-error-text="暂无商品"
        bg-color="#FFF"
        v-model="dataList"
        @query="queryList"
        safe-area-inset-bottom
    >
        <view slot="top" class="topTabbar">
			<view class="search_t">
				<view style="width: 500rpx; margin: 10rpx 0 0 20rpx">
					<u-input prefixIcon="search" border="none" v-model="keyword"
						prefixIconStyle="font-size: 48rpx;color: #999"
						placeholderStyle="font-size: 28rpx;color: #999" :customStyle="{ background: '#F6F6F6' }"
						placeholder="请输入商品关键字"></u-input>
				</view>
				<view class="search_type" @click="doSearch">搜索</view>
			</view>
            <u-tabs
                :current="currentTab"
                :list="tabList"
                @change="tabChange"
                :scrollable="false"
            ></u-tabs>
        </view>
        <!-- 左边儿的 -->
        <u-checkbox-group
            v-model="leftValue"
            placement="column"
            @change="leftGroupChange"
        >
            <view
                class="flex_wrap row_middle radioContent"
                v-for="(item, index) in dataList"
            >
                <u-checkbox
                    :customStyle="{ marginRight: '8px' }"
                    shape="circle"
                    :key="index"
                    :name="item.id"
                    size="50rpx"
                    iconSize="30rpx"
                />
                <view
                    class="flex_wrap row_between"
                    style="width: 580rpx"
                >
                    <u-image
                        :src="item.thumbnail"
                        mode="aspectFill"
                        width="200rpx"
                        height="200rpx"
                    ></u-image>
                    <view
                        class="flex_wrap flex_column row_between row_top"
                        style="width: 350rpx"
                    >
                        <text class="goodsName breakText">{{
                            item.goodsName
                        }}</text>
                        <view class="flex_wrap">
                            <u-text
                                size="28rpx"
                                mode="price"
                                color="#FF0000"
                                :text="goodsSkuListPrice(item)"
                            />
                            <text
                                style="
                                    color: #ff0000;
                                    margin-left: 10rpx;
                                    font-size: 28rpx;
                                "
                                >起</text
                            >
                        </view>
                    </view>
                </view>
            </view>
        </u-checkbox-group>
        <view
            class="bottomfixed flex_wrap row_between row_middle"
            slot="bottom"
        >
            <u-checkbox-group>
                <u-checkbox
                    :checked="selectedAllValue"
                    label="全选"
                    size="40rpx"
                    label-size="32rpx"
                    label-color="#666666"
                    @change="selectAllChange"
                    shape="circle"
                ></u-checkbox
            ></u-checkbox-group>

            <view class="flex_wrap row_middle">
                <view style="margin-right: 20rpx">
                    <u-text
                        size="28rpx"
                        color="#3D3D3D"
                        :text="`共选：${leftValue.length}件`"
                    />
                </view>
                <u-button
                    :text="currentTab === 1 ? '取消关联' : '关联商品'"
                    :customStyle="{ ...buttonCustomStyle }"
                    color="#1682FF"
                    shape="circle"
                    :plain="currentTab === 1 ? true : false"
                    @click="currentTab === 1 ?delChangeGoods() : changeGoods()"
                />
            </view>
        </view>
    </z-paging>
</template>

<script>
import {
    getGoodsIdListBySalesmanId,
    updateGoodsIdList,
    getGoodsListApi,
    delistGoodsIdList,
} from "@/api/shopSalesman.js";
import {getLedGoodsList} from "@/api/order.js";
import caches from "@/config/caches.js";
import { formatDecimal } from "@/utils/index.js";
import { numDiv } from "@/js_sdk/nl-precisionNum/precisionNum.js";
export default {
    computed: {
        goodsSkuListPrice() {
            return (item) => {
                const money =
                    item.minPrice || numDiv(item.price * item.discount, 100) || item.price;
                return formatDecimal(numDiv(money, 100));
            };
        },
    },
    data() {
        return {
            selectedAllValue: false,
            buttonCustomStyle: {
                width: "158rpx",
                height: "60rpx",
                fontSize: "28rpx",
            },
            leftList: [
                {
                    name: "1231312",
                },
            ],
            tabList: [
                {
                    name: "全部商品",
                    id: 0,
                },
                {
                    name: "已关联商品",
                    id: 1,
                },
            ],
            currentTab: 0,
            dataList: [],
            leftValue: [],
            leftQueryValue: [],
            rightValue: [],
			couponId:'',
			keyword:''
        };
    },
	onLoad(op) {
		this.couponId = op.couponId || ''
		this.leftQueryValue = JSON.parse(decodeURIComponent(op.leftValue)) || []
		this.leftValue = this.leftQueryValue
	},
    methods: {
		async queryList(pageNo, pageSize) {
			const that = this;
			this.goodsData = {
			    pageNum: pageNo,
			    pageSize: pageSize,
			    goodsFlag: 0,
			    goodssource: 0,
			    queryType:4,
			    tenantId:
			        uni.getStorageSync(caches.TENDID) ||
			        uni.getStorageSync(caches.USER_INFO)["tenantId"],
			};
			let result;
			switch (this.currentTab) {
				case 0:
					if (this.keyword) this.goodsData.goodsName = this.keyword;
					result = await getGoodsListApi(this.goodsData);
					break;
				case 1:
					const params = {
						pageNum: pageNo,
						pageSize: pageSize,
					};
					if (this.keyword) params.goodsName = this.keyword;
					result = await getLedGoodsList(that.couponId,params);
					break;
				default:
					result = await getGoodsListApi(this.goodsData);
			}
			const r = Math.ceil(result.data.total / pageSize);
			if (pageNo <= r) this.selectedAllValue = false;
			that.$refs.paging.completeByTotal(result.data.rows, result.data.total);
		},
		doSearch(){
			this.$refs.paging.reload();
		},
        async tabChange(e) {
            this.currentTab = e.index;
            this.selectedAllValue = false;
            this.leftValue = [];
            await this.$refs.paging.reload();
            if (this.currentTab === 0) {
				this.leftValue = this.leftQueryValue
            }
        },
		async delChangeGoods() {
		    if (!this.leftValue.length) return uni.$u.toast("请选择商品！");
			this.leftValue =this.leftQueryValue.filter(item => (item != this.leftValue))
			uni.$emit('getuser', this.leftValue)
			uni.navigateBack(1)
		},
        async changeGoods() {
            if (!this.leftValue.length) return uni.$u.toast("请选择商品！");
			uni.$emit('getuser', this.leftValue)
			uni.navigateBack(1)
        },
        leftGroupChange(e) {
            console.log(e,);
            this.selectedAllValue = e.length === this.dataList.length;
        },
        selectAllChange(e) {
            this.selectedAllValue = e;
            if (e) return (this.leftValue = this.dataList.map((v) => v.id));
            this.leftValue = [];
        },
    },
};
</script>

<style>
page {
    background-color: #f6f6f6 !important;
}
</style>

<style scoped lang="scss">
.topTabbar {
    background-color: #fff;
    // padding-bottom: 16rpx;
    padding:24rpx 30rpx 16rpx;
}

.radioContent {
    width: 670rpx;
    height: 256rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 0 auto;
    padding-left: 20rpx;
    box-sizing: border-box;
    margin-top: 40rpx;
}

.goodsName {
    width: 100%;
    font-size: 28rpx;
    color: #3d3d3d;
    font-weight: bold;
}

.bottomfixed {
    width: 100vw;
    height: auto;
    padding: 28rpx 40rpx;
    box-sizing: border-box;
    background-color: #fff;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.search_t {
		width: 100%;
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 64rpx;
		font-weight: none;
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	.search_type {
		width: 104rpx;
		height: 64rpx;
		background: #588bf3;
		border-radius: 0px 64rpx 64rpx 0px;
		color: #fff;
		line-height: 64rpx;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
	}
</style>
